<template>
  <div>
    <h3>备案主体信息</h3>
    <el-card>
      <div>
        <div class="mar-top-12">
          <div class="title border-line f-size-16">备案主体基本信息</div>
          <div class="content">
            <div class="item">
              <p class="title">备案主体名称</p>
              <span>某某某有限公司</span>
            </div>
            <div class="item">
              <p class="title">登记状态</p>
              <span>存续(在营，开业，在册)</span>
            </div>
            <div class="item">
              <p class="title">统一社会信用代码</p>
              <span>12341234</span>
            </div>
            <div class="item">
              <p class="title">备案主体类型</p>
              <span>-</span>
            </div>
            <div class="item">
              <p class="title">登记机关</p>
              <span>某某省</span>
            </div>
            <div class="item">
              <p class="title">注册资本</p>
              <span>1000,00万</span>
            </div>
            <div class="item">
              <p class="title">填报类型</p>
              <span>合伙企业受益所有人信息备案-自行填报</span>
            </div>
          </div>
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="当前受益所有人" name="1">
              <el-table
                :data="tableDatas"
                style="width: 100%"
                class="table-box mar-top-12"
                :header-cell-style="{ background: '#fff', color: '#333' }"
                border
              >
                <el-table-column prop="prop" label="" width="50px" v-if="showEyes == '1'">
                  <template slot-scope="{ row }">
                    <el-button
                      type="text"
                      icon="el-icon-view"
                      :style="{ color: row.view ? '#409EFF' : '#ccc', 'font-size': ' 18px' }"
                      @click="viewText(row)"
                    ></el-button>
                  </template>
                </el-table-column>
                <el-table-column prop="name" label="姓名" width="120px" show-overflow-tooltip> </el-table-column>
                <el-table-column prop="nationality" label="国籍" width="120px"> </el-table-column>
                <el-table-column prop="type" label="受益所有权关系类型" width="180px" show-overflow-tooltip> </el-table-column>
                <el-table-column prop="idType" label="身份证件或身份证明文件类型" width="" show-overflow-tooltip> </el-table-column>
                <el-table-column prop="idCode" label="身份证件或身份证明文件号码" width="" show-overflow-tooltip> </el-table-column>
                <el-table-column prop="time" label="更新时间" width="160px" show-overflow-tooltip> </el-table-column>
                <el-table-column prop="prop" label="操作" width="120px">
                  <template slot-scope="{ row }">
                    <el-button type="text" @click="viewItem(row)">查看</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                class="text-right mar-top-12"
              />
            </el-tab-pane>
            <el-tab-pane label="历史受益所有人" name="2">
              <el-table
                :data="tableDatas"
                style="width: 100%"
                class="table-box mar-top-12"
                :header-cell-style="{ background: '#fff', color: '#333' }"
                border
              >
                <el-table-column prop="name" label="姓名" width="120px" show-overflow-tooltip> </el-table-column>
                <el-table-column prop="nationality" label="国籍" width="120px"> </el-table-column>
                <el-table-column prop="type" label="受益所有权关系类型" width="180px" show-overflow-tooltip> </el-table-column>
                <el-table-column prop="idType" label="身份证件或身份证明文件类型" width="" show-overflow-tooltip> </el-table-column>
                <el-table-column prop="idCode" label="身份证件或身份证明文件号码" width="" show-overflow-tooltip> </el-table-column>
                <el-table-column prop="time" label="更新时间" width="160px" show-overflow-tooltip> </el-table-column>
                <el-table-column prop="prop" label="操作" width="120px">
                  <template slot-scope="{ row }">
                    <el-button type="text" @click="viewItem(row)">查看</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                class="pagination mar-top-12"
              />
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </el-card>
    <div class="text-right mar-top-12">
      <el-button size="small" type="primary" @click="exportInfo">导 出</el-button>
      <el-button size="small" @click="goBack">关 闭 </el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BackupsDetail',

  data() {
    return {
      page: 1,
      size: 10,
      total: 0,
      activeName: '1',
      tableDatas: [
        {
          name: '张*',
          nationality: '中国香港',
          type: '实控',
          idType: '********',
          idCode: '********',
          time: '2025-08-08 15:35:33',
        },
      ],
      showEyes: '',
    }
  },
  created() {
    this.showEyes = this.$route.query?.checked
  },
  mounted() {},

  methods: {
    goBack() {
      this.$router.push('/infoVerification/detail')
    },
    exportInfo() {},
    handleClick() {},
    viewItem(row) {
      this.$router.push({
        path: '/infoVerification/backupsDeatil',
        query: {
          checked: this.showEyes,
        },
      })
    },
    handleSizeChange(val) {},
    handleCurrentChange(val) {},
    viewText(row) {
      row.view = !row.view
      if (row.view) {
        row.name = '张三'
        row.idType = '其他证件类型'
        row.idCode = '12341234'
      } else {
        row.name = '张*'
        row.idType = '******'
        row.idCode = '******'
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.content {
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  color: #666;
  padding-bottom: 12px;
  .item {
    width: 33%;
    p {
      margin-bottom: 6px;
    }
  }
}

</style>